import Vue from "vue";
import Router from "vue-router";
import Home from "@/views/Home.vue";
import MyTitle from "@/views/Edit.vue";
import Usage from "@/views/Usage";
import Search from "./components/netease/Search";
import NeteaseMusic from '@/views/NeteaseMusic';
import Pictures from "./components/Pictures";
import TestVue from "@/views/TestVue";
import Form from "./components/Form";
import Todo from "@/views/Todo";
import IndexSideBar from "@/views/IndexSideBar";

Vue.use(Router);

// 定义动态路由
const User = {
  template: `  <div class="user">
    <el-avatar :size="size" :src="circleUrl"></el-avatar>
      <h2>User {{ $route.params.id }}</h2>
    </div>`
};
export default new Router({
  mode: `history`,
  base: process.env.BASE_URL,
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username;
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push(`/`);
    }
  },
  routes: [
    {
      path: `/netease`,
      name: `netease`,
      component: NeteaseMusic
    },
    {
      path: `/user/:userId`,
      name: `user`,
      component: User
    },
    {
      path: `/`,
      name: `home`,
      component: Home
    },
    {
      path: `/about`,
      name: `about`,
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: function() {
        return import(/* webpackChunkName: "about" */ `@/views/About.vue`);
      }
    },
    {
      path: `/title`,
      name: `MyTitle`,

      component: function() {
        return import(/*webpackChunkName:"MyTitle" */ `@/views/Edit.vue`);
      }
    },
    {
      path: `/showweather`,
      name: `ShowWeather`,

      component: function() {
        return import(
          /*webpackChunkName:"MyTitle" */ `@/views/ShowWeather.vue`
        );
      }
    },
    {
      path: `/usage`,
      name: `Usage`,
      component: Form
    },
    {
      path: `/pictures`,
      name: `Pictures`,
      component: Pictures
    },
    {
      path: `/testvue`,
      name: `TestVue`,
      component: TestVue
    },
    {
      path: `/todo`,
      name: `Todo`,
      component: Todo
    },{
      path: `/sidebar`,
      name: `indexSidebar`,
      component: IndexSideBar
    }
  ]
});
